<template>
  <div style="display: flex">
    <transition name="el-zoom-in-center">
      <div style="display: flex;flex-direction: column;min-width: 220px;position: relative" v-show="isShow">
        <el-header
          style="display:flex;align-items: center;justify-content: space-between;padding: 10px;border-bottom: 1px solid #f2f2f2;">
          <div>
            <svg-icon class="primary" :icon-class="icon"/>
            <span class="primary">{{title}}</span>
          </div>
        </el-header>
        <el-tree highlight-current :data="categoryData" :props="defaultProps" node-key="id"
                 :expand-on-click-node="false"
                 ref="tree"
                 @node-click="handleNodeClick">
            <span class="slot-t-node" slot-scope="{ node, data }">
                <i
                  :class="{'el-icon-folder primary': data.id=='', 'el-icon-delete primary':data.id=='del', 'el-icon-folder-delete primary':data.id=='not'}"/>
                <span>{{ data.name }}</span>

            </span>
        </el-tree>
      </div>
    </transition>

    <div class="leftBotton_Css" @click="leftBotton">
      <a style="width: 100%">
        <div class="left_css">
          <i :class="[isShow ?'el-icon-caret-left':'el-icon-caret-right']"></i>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import utils from '../../utils/utils.js'
  import SingleUpload from '@/components/Upload/singleUpload'
  import CategoryDialog from '@/components/CategoryDialog'
  import request from '@/utils/request'

  export default {
    directives: {elDragDialog},
    data() {
      return {
        isShow: true,
        categoryData: [{
          name: '所有分类',
          id: '',
          childrens: []
        }],
        defaultProps: {
          children: 'childrens',
          label: 'name'
        },
        dialogTitle: '',
        dialogShow: false,
        categoryName: '',
        treeFormData: {
          id: '',
          name: '',
          thumbnail: '',
          parentId: ''
        },
        flag: 'save',
        category: {},
      }
    },
    props: {
      icon: '',
      title: '',
      request: '',
    },
    components: {
      SingleUpload,
      CategoryDialog
    },
    created() {
      this.loadList()
    },
    methods: {
      loadList() {
        let _this = this;
        request({
          url: '/admin/' + this.request + '/list',
          method: 'get',
        }).then(response => {
          console.log(response)
          _this.categoryData[0].childrens = response.data
        }).catch(error => {
        })
      },
      leftBotton: function () {
        this.isShow = !this.isShow
      },

      handleNodeClick(object, Node, element) {
        if (object.id == 'not') {
          //未分类
          this.$emit('notClick')
        } else if (object.id == 'del') {
          //回收站
          this.$emit('delClick')
        } else {
          this.$emit('nodeClick', object)
        }
        this.category = object;
      },

    }
  }
</script>

<style lang="scss" scoped>
  .dialog {
    .el-dialog__header {
      border-bottom: 1px solid #eee;
    }
  }

  .dialog-button-slot {
    width: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }

  .leftBotton_Css {
    min-height: calc(100vh - 84px);
    background-color: #f2f2f2;
    width: 8px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .left_css {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #999999;
    border-radius: 2px;
  }
</style>
